import React, { Component } from 'react';
import './Login.styl';

export default class Login extends Component {
	constructor (props) {
		super(props);
		this.state = {
			activeType: 'IN',
		}
	}
	changeTab=(item) => {
		this.setState(() => ({activeType: item}));
	}
	render() {
		return (
			<div className="login_box">
				<div className="login_box_inner">
					<div className="login_box_tab">
						<p onClick={() => this.changeTab('IN')} className={this.state.activeType === 'IN' ? 'login_tab_button is_active' : 'login_tab_button'}>SIGN IN</p>
						<p onClick={() => this.changeTab('UP')} className={this.state.activeType === 'UP' ? 'login_tab_button is_active' : 'login_tab_button'}>SIGN UP</p>
					</div>
					<div className="login_box_form">
						<div className="login_form_body">
							<div className="form_body_inner">
								<div className="form_item_box">
									
								</div>
								<div className="form_item_box"></div>
							</div>
						</div>
						<div className="login_form_submit">
							<p className="login_submit_text">LET ME IN</p>
							<div className="login_submit_button">
								<i className="iconfont icon-arrow-right click_ico"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}